<script setup lang="ts">
import Blog_menu from "@/components/admin/blog_menu.vue";
import Blog_bread_crumb from "@/components/admin/blog_bread_crumb.vue";
import Blog_logo from "@/components/admin/blog_logo.vue";
import Blog_tabs from "@/components/admin/blog_tabs.vue";
import {IconMenu} from '@arco-design/web-vue/es/icon';
import Blog_theme from "@/components/admin/blog_theme.vue";
import {useStore} from "@/stores/counter";
import Blog_user_info_menu from "@/components/admin/blog_user_info_menu.vue";

const store = useStore()

</script>

<template>
  <div class="blog_admin">
    <aside :class="{collapsed: store.collapse}">
      <blog_logo></blog_logo>
      <blog_menu></blog_menu>
    </aside>
    <main>
      <div class="blog_head">
        <blog_bread_crumb></blog_bread_crumb>
        <div class="blog_function_area">
          <IconMenu class="action_icon"></IconMenu>
          <blog_theme></blog_theme>
          <blog_user_info_menu></blog_user_info_menu>
        </div>
      </div>
      <blog_tabs></blog_tabs>
      <div class="blog_container">
        <router-view v-slot="{Component}">
          <transition name="fade" mode="out-in">
            <component :is="Component"></component>
          </transition>
        </router-view>
      </div>
    </main>
  </div>
</template>

<style lang="scss">
.blog_admin {
  display: flex;
  color: var(--color-text-1);
  height: 100vh;

  aside {
    width: 240px;
    border-right: 1px solid var(--bg);
    height: 100vh;
    background-color: var(--color-bg-1);
    transition: all .3s;
    position: relative;
  }

  aside.collapsed {
    width: 48px;

    & ~ main {
      width: calc(100% - 48px);
    }
  }

  main {
    width: calc(100% - 240px);
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .3s;

    .blog_head {
      height: 60px;
      width: 100%;
      border-bottom: 1px solid var(--bg);
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      align-items: center;
      background-color: var(--color-bg-1);


      .blog_function_area {
        display: flex;
        align-items: center;

        .action_icon {
          margin-right: 10px;
          cursor: pointer;
          font-size: 16px;
        }
      }
    }


    .blog_container {
      background-color: var(--bg);
      min-height: calc(100vh - 90px);
      padding: 20px;
    }
  }
}

.blog_container {
  background-color: var(--bg);
  min-height: calc(100vh - 90px);
  padding: 20px;
}

.fade-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.fade-enter-active {
  transform: translateX(-30px);
  opacity: 0;
}

.fade-enter-to {
  transform: translateX(0px);
  opacity: 1;
}

.fade-leave-active, .fade-enter-active {
  transition: all 0.3s ease-out;
}
</style>
